<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>商场消防云平台 - 应急预案管理</title>
  <script src="js/jquery-3.7.1.js"></script>
  <style>
    body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f5f5f5; }
    .header { background-color: #409EFF; color: white; padding: 20px; display: flex; justify-content: space-between; align-items: center; }
    .nav { background-color: #333; overflow: hidden; display: flex; }
    .nav a { color: white; padding: 14px 16px; text-decoration: none; font-size: 17px; }
    .nav a:hover { background-color: #ddd; color: black; }
    .nav a.active { background-color: #f44336; color: white; }
    .container { padding: 20px; max-width: 1200px; margin: 0 auto; }

    /* 搜索区域样式 */
    .search-section { background-color: white; padding: 15px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 0 5px rgba(0,0,0,0.1); }
    .search-group { display: flex; gap: 15px; margin-bottom: 10px; }
    .search-item { flex: 1; }
    .search-item label { display: block; margin-bottom: 5px; font-weight: bold; }
    .search-item input, .search-item select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }

    /* 表格样式 */
    .plan-table { width: 100%; border-collapse: collapse; margin-top: 20px; background-color: white; box-shadow: 0 0 5px rgba(0,0,0,0.1); }
    .plan-table th, .plan-table td { border: 1px solid #ddd; padding: 12px 8px; text-align: left; }
    .plan-table th { background-color: #f2f2f2; font-weight: bold; }
    .plan-content { max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* 按钮样式 */
    .operation-btn { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; margin-right: 5px; }
    .edit-btn { background-color: #409EFF; color: white; }
    .delete-btn { background-color: #f44336; color: white; }
    .view-btn { background-color: #67c23a; color: white; }
    .add-btn { padding: 8px 20px; background-color: #67c23a; color: white; border: none; border-radius: 4px; cursor: pointer; margin-bottom: 10px; font-size: 14px; }

    /* 弹窗样式 */
    .modal-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; z-index: 999; }
    .modal { width: 800px; background: #fff; border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.2); overflow: hidden; max-height: 90vh; display: flex; flex-direction: column; }
    .modal-header { padding: 15px; background-color: #f8f9fa; border-bottom: 1px solid #ddd; font-size: 18px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
    .modal-close { cursor: pointer; font-size: 20px; }
    .modal-body { padding: 20px; overflow-y: auto; flex: 1; }
    .modal-footer { padding: 15px; background-color: #f8f9fa; border-top: 1px solid #ddd; text-align: right; }
    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; margin-bottom: 5px; font-weight: bold; }
    .form-group input, .form-group select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
    .form-group textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; min-height: 200px; resize: vertical; }
    .btn-save { background-color: #409EFF; color: white; padding: 8px 20px; border: none; border-radius: 4px; cursor: pointer; }
    .btn-cancel { background-color: #ccc; color: #333; padding: 8px 20px; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px; }

    /* 查看预案弹窗 */
    .view-modal { width: 900px; }
    .view-content { line-height: 1.8; white-space: pre-line; }
    .view-section { margin-bottom: 20px; }
    .view-section h4 { margin: 10px 0; color: #333; border-bottom: 1px solid #eee; padding-bottom: 5px; }
  </style>
</head>
<body>
<div class="header">
  <h1>商场消防云平台</h1>
  <div><a href="LogoutServlet">退出登录</a></div>
</div>

<div class="nav">
  <a href="main.jsp">首页</a>
  <a href="fire_alarm_list.jsp">火灾报警系统</a>
  <a href="equipment_management.jsp">消防设备管理系统</a>
  <a href="inspection_system.jsp">设备巡检系统</a>
  <a href="video_monitoring.jsp">视频监控系统</a>
  <a href="emergency_plan.jsp" class="active">应急预案管理</a>
  <%
    String role = (String) session.getAttribute("role");
    if ("管理人员".equals(role)) {
  %>
  <a href="duty_staff.jsp">检查人员管理</a>
  <a href="system.jsp">系统设置</a>
  <% } %>
  <a href="change_password.jsp">修改密码</a>
</div>

<div class="container">
  <h2>应急预案管理</h2>
  <button class="add-btn" onclick="showAddModal()">添加应急预案</button>

  <!-- 搜索区域 -->
  <div class="search-section">
    <div class="search-group">
      <div class="search-item">
        <label for="searchPlanType">预案类型：</label>
        <select id="searchPlanType">
          <option value="">全部类型</option>
          <option value="小火情">小火情</option>
          <option value="中等火情">中等火情</option>
          <option value="大火情">大火情</option>
          <option value="特殊区域火情">特殊区域火情</option>
        </select>
      </div>
      <div class="search-item">
        <label for="searchArea">适用区域：</label>
        <input type="text" id="searchArea" placeholder="输入适用区域搜索">
      </div>
      <div class="search-item">
        <label for="searchStatus">状态：</label>
        <select id="searchStatus">
          <option value="">全部状态</option>
          <option value="启用">启用</option>
          <option value="禁用">禁用</option>
        </select>
      </div>
    </div>
    <button class="add-btn" onclick="searchPlans()">搜索</button>
    <button class="add-btn" style="background-color:#999;" onclick="resetSearch()">重置</button>
  </div>

  <!-- 应急预案表格 -->
  <table class="plan-table" id="planTable">
    <thead>
    <tr>
      <th>ID</th>
      <th>预案名称</th>
      <th>预案类型</th>
      <th>适用区域</th>
      <th>预案内容</th>
      <th>创建时间</th>
      <th>状态</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <!-- 数据将通过AJAX加载 -->
    </tbody>
  </table>
</div>

<!-- 添加/编辑预案弹窗 -->
<div class="modal-mask" id="editModalMask">
  <div class="modal">
    <div class="modal-header">
      <span id="modalTitle">添加应急预案</span>
      <span class="modal-close" onclick="closeEditModal()">&times;</span>
    </div>
    <div class="modal-body">
      <input type="hidden" id="planId" />
      <div class="form-group">
        <label for="planName">预案名称：</label>
        <input type="text" id="planName" placeholder="例如：一楼电器区小火情处理预案" required>
      </div>
      <div class="form-group">
        <label for="planType">预案类型：</label>
        <select id="planType" required>
          <option value="">请选择预案类型</option>
          <option value="小火情">小火情</option>
          <option value="中等火情">中等火情</option>
          <option value="大火情">大火情</option>
          <option value="特殊区域火情">特殊区域火情（如：配电室、仓库）</option>
        </select>
      </div>
      <div class="form-group">
        <label for="applicableArea">适用区域：</label>
        <input type="text" id="applicableArea" placeholder="例如：一楼电器区、二楼服装区" required>
      </div>
      <div class="form-group">
        <label for="planContent">预案内容：</label>
        <textarea id="planContent" placeholder="请详细描述应急处理步骤、责任人、联系方式、资源调配等内容..." required></textarea>
      </div>
      <div class="form-group">
        <label for="planStatus">状态：</label>
        <select id="planStatus">
          <option value="启用">启用</option>
          <option value="禁用">禁用</option>
        </select>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn-cancel" onclick="closeEditModal()">取消</button>
      <button class="btn-save" onclick="savePlan()">保存</button>
    </div>
  </div>
</div>

<!-- 查看预案弹窗 -->
<div class="modal-mask" id="viewModalMask">
  <div class="modal view-modal">
    <div class="modal-header">
      <span id="viewTitle">查看应急预案</span>
      <span class="modal-close" onclick="closeViewModal()">&times;</span>
    </div>
    <div class="modal-body">
      <div class="view-section">
        <h4>预案基本信息</h4>
        <p><strong>预案名称：</strong><span id="viewPlanName"></span></p>
        <p><strong>预案类型：</strong><span id="viewPlanType"></span></p>
        <p><strong>适用区域：</strong><span id="viewApplicableArea"></span></p>
        <p><strong>创建时间：</strong><span id="viewCreateTime"></span></p>
        <p><strong>状态：</strong><span id="viewStatus"></span></p>
      </div>
      <div class="view-section">
        <h4>预案详细内容</h4>
        <div class="view-content" id="viewPlanContent"></div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn-cancel" onclick="closeViewModal()">关闭</button>
    </div>
  </div>
</div>

<script>
  // 页面加载时加载预案数据
  $(document).ready(function() {
    loadPlanData();
  });

  // 加载预案数据
  function loadPlanData() {
    var type = $("#searchPlanType").val();
    var area = $("#searchArea").val();

    $.ajax({
      url: "EmergencyPlanServlet",
      method: "GET",
      data: {
        action: "list",
        type: type,
        area: area
      },
      dataType: "json",
      success: function(data) {
        var tbody = $("#planTable tbody");
        tbody.empty();

        if (data.error) {
          tbody.append("<tr><td colspan='8' style='text-align: center; color: red;'>" + data.error + "</td></tr>");
          return;
        }

        if (data.length === 0) {
          tbody.append("<tr><td colspan='8' style='text-align: center; color: #999;'>暂无应急预案数据</td></tr>");
          return;
        }

        // 渲染表格数据
        data.forEach(function(plan) {
          var statusLabel = plan.status === "启用" ?
                  "<span style='color:green'>启用</span>" :
                  "<span style='color:#999'>禁用</span>";

          tbody.append(
                  "<tr>" +
                  "<td>" + plan.id + "</td>" +
                  "<td>" + plan.planName + "</td>" +
                  "<td>" + plan.planType + "</td>" +
                  "<td>" + plan.applicableArea + "</td>" +
                  "<td class='plan-content' title='" + plan.content + "'>" + plan.content + "</td>" +
                  "<td>" + plan.createTime + "</td>" +
                  "<td>" + statusLabel + "</td>" +
                  "<td>" +
                  "<button class='operation-btn view-btn' onclick=\"viewPlan(" + plan.id + ")\">查看</button>" +
                  "<button class='operation-btn edit-btn' onclick=\"editPlan(" + plan.id + ")\">编辑</button>" +
                  "<button class='operation-btn delete-btn' onclick=\"deletePlan(" + plan.id + ")\">删除</button>" +
                  "</td>" +
                  "</tr>"
          );
        });
      },
      error: function() {
        $("#planTable tbody").html("<tr><td colspan='8' style='color: red; text-align: center;'>数据加载失败，请稍后重试</td></tr>");
      }
    });
  }

  // 搜索预案
  function searchPlans() {
    loadPlanData();
  }

  // 重置搜索条件
  function resetSearch() {
    $("#searchPlanType").val("");
    $("#searchArea").val("");
    $("#searchStatus").val("");
    loadPlanData();
  }

  // 显示添加弹窗
  function showAddModal() {
    $("#modalTitle").text("添加应急预案");
    $("#planId").val("");
    $("#planName").val("");
    $("#planType").val("");
    $("#applicableArea").val("");
    $("#planContent").val("");
    $("#planStatus").val("启用");
    $("#editModalMask").css("display", "flex");
  }

  // 关闭添加/编辑弹窗
  function closeEditModal() {
    $("#editModalMask").css("display", "none");
  }

  // 保存预案
  function savePlan() {
    var id = $("#planId").val();
    var planName = $("#planName").val().trim();
    var planType = $("#planType").val();
    var applicableArea = $("#applicableArea").val().trim();
    var planContent = $("#planContent").val().trim();
    var status = $("#planStatus").val();

    // 表单验证
    if (!planName || !planType || !applicableArea || !planContent) {
      alert("请填写完整信息");
      return;
    }

    var url = "EmergencyPlanServlet";
    var data = {
      action: id ? "update" : "add",
      id: id,
      planName: planName,
      planType: planType,
      content: planContent,
      applicableArea: applicableArea,
      status: status
    };

    $.ajax({
      url: url,
      method: "POST",
      data: data,
      dataType: "json",
      success: function(res) {
        if (res.success) {
          alert(id ? "更新成功" : "添加成功");
          closeEditModal();
          loadPlanData();
        } else {
          alert("操作失败：" + (res.error || "未知错误"));
        }
      },
      error: function() {
        alert("网络异常，请重试");
      }
    });
  }

  // 编辑预案
  function editPlan(id) {
    $.ajax({
      url: "EmergencyPlanServlet",
      method: "GET",
      data: {
        action: "get",
        id: id
      },
      dataType: "json",
      success: function(data) {
        if (data.error) {
          alert(data.error);
          return;
        }

        $("#modalTitle").text("编辑应急预案");
        $("#planId").val(data.id);
        $("#planName").val(data.planName);
        $("#planType").val(data.planType);
        $("#applicableArea").val(data.applicableArea);
        $("#planContent").val(data.content);
        $("#planStatus").val(data.status);
        $("#editModalMask").css("display", "flex");
      },
      error: function() {
        alert("获取数据失败，请重试");
      }
    });
  }

  // 查看预案
  function viewPlan(id) {
    $.ajax({
      url: "EmergencyPlanServlet",
      method: "GET",
      data: {
        action: "get",
        id: id
      },
      dataType: "json",
      success: function(data) {
        if (data.error) {
          alert(data.error);
          return;
        }

        $("#viewTitle").text("查看应急预案：" + data.planName);
        $("#viewPlanName").text(data.planName);
        $("#viewPlanType").text(data.planType);
        $("#viewApplicableArea").text(data.applicableArea);
        $("#viewCreateTime").text(data.createTime);
        $("#viewStatus").text(data.status);
        $("#viewPlanContent").text(data.content);
        $("#viewModalMask").css("display", "flex");
      },
      error: function() {
        alert("获取数据失败，请重试");
      }
    });
  }

  // 关闭查看弹窗
  function closeViewModal() {
    $("#viewModalMask").css("display", "none");
  }

  // 删除预案
  function deletePlan(id) {
    if (!confirm("确定要删除这条应急预案吗？删除后将无法恢复！")) {
      return;
    }

    $.ajax({
      url: "EmergencyPlanServlet",
      method: "GET",
      data: {
        action: "delete",
        id: id
      },
      dataType: "json",
      success: function(res) {
        if (res.success) {
          alert("删除成功");
          loadPlanData();
        } else {
          alert("删除失败：" + (res.error || "未知错误"));
        }
      },
      error: function() {
        alert("网络异常，请重试");
      }
    });
  }
</script>
</body>
</html>